<template>
    <div class="search-container" @scroll="handle_scroll">
        <div ref="inner">
            <van-nav-bar
                title="搜索"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
                fixed
            >
                <template #right>
                    <router-link :to="{ name: 'ShoppingCart' }">
                        <van-icon
                            name="shopping-cart-o"
                            color="#373737"
                            size="20"
                            :badge="
                                $store.state.goods_count
                                    ? $store.state.goods_count
                                    : ''
                            "
                        />
                    </router-link>
                </template>
            </van-nav-bar>
            <van-search
                v-model.trim="value"
                shape="round"
                placeholder="请输入搜索关键词"
                autofocus
                @search="handle_search"
                @focus="show = true"
            />
            <div class="history" v-show="show && search_words.length">
                <div class="title">
                    历史记录：
                    <van-button
                        size="mini"
                        type="danger"
                        plain
                        @click="clear_history"
                        >清空历史记录
                    </van-button>
                </div>
                <van-tag
                    color="#666"
                    plain
                    size="large"
                    v-for="item in search_words"
                    :key="item"
                    @click="handle_search(item)"
                >
                    {{ item }}
                </van-tag>
            </div>
            <van-loading
                v-show="loading"
                type="spinner"
                color="#1989fa"
                size="40"
                style="text-align: center"
            />
            <GoodsCard
                v-for="item in goods_data"
                :goods="item"
                @change_count="handle_count(item, $event)"
            />
            <div v-show="is_bottom" class="bottom">已经到底了</div>
        </div>
    </div>
</template>

<script>
import { search } from "@/api"
import GoodsCard from "@/components/GoodsCard"

export default {
    created() {
        this.search_words = this.$store.state.search_words
    },
    destroyed() {
        this.$store.commit("set_search_words", this.search_words)
    },
    components: {
        GoodsCard
    },
    data() {
        return {
            value: "",
            last_value: "",
            page: 1,
            search_words: [],
            show: true,
            goods_data: [],
            loading: false,
            is_bottom: false,
            total: 0
        }
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1)
        },
        handle_search(value, is_add = false) {
            if (value) {
                this.last_value = value
                this.show = false
                this.loading = true
                search({ type: value, page: this.page, size: 10 }).then(
                    (resp) => {
                        this.total = resp.total
                        const data = resp.list.map((item) => ({
                            ...item,
                            count: this.$store.state.shopping_cart[item.id] || 0
                        }))
                        if (is_add) {
                            this.goods_data.push(...data)
                        } else {
                            this.goods_data = data
                        }
                        if (!this.search_words.includes(value)) {
                            this.search_words.push(value)
                        }
                        this.loading = false
                    }
                )
            }
        },
        clear_history() {
            this.search_words = []
        },
        handle_count(item, count) {
            item.count = count
            this.$store.commit("set_shopping_cart", item)
        },
        handle_scroll(e) {
            if (this.total === this.goods_data.length) {
                if (this.total !== 0) {
                    this.is_bottom = true
                }
                return
            }
            if (this.loading) {
                return
            }
            const scroll_top = e.target.scrollTop,
                outter_height = e.target.offsetHeight,
                inner_height = this.$refs.inner.offsetHeight
            if (scroll_top + outter_height > inner_height) {
                this.page++
                this.handle_search(this.last_value, true)
            }
        }
    }
}
</script>

<style lang="less">
@import url(~@/assets/css/var.less);
.search-container {
    transition: 0.4s;
    height: 100vh;
    overflow-y: scroll;
    .van-search {
        margin-top: 46px;
    }
    .history {
        margin: 15px 10px 0;
        .title {
            display: flex;
            justify-content: space-between;
        }
        .van-tag {
            margin: 0 8px;
        }
    }
    .bottom {
        color: @secondary;
        font-size: 16px;
        text-align: center;
        margin: 13px 0;
    }
}
</style>
